<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}"  media="all">

    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>



<table style="width: 90%;text-align: center;margin-top: 100px" >
    <tr>
        <td style="width: 30%;text-align: center">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>产品筛选</legend>
            </fieldset>

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">产品名称</label>
        <div class="layui-input-block">
            <input id="pname" type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" style="width: 200px">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">产品类型</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao" id="proty">

            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">供应商</label>
        <div class="layui-input-block">
            <select name="interest" lay-filter="aihao" id="suppli">
            </select>
        </div>
    </div>



    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="submit" type="button" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>

</form>
</td>
        <td style="width: 300px"></td>
<td style="vertical-align:top ;text-align: center";valign="middle">

<script th:src="@{../layui/layui.js}" charset="utf-8"></script>
    <fieldset class="layui-elem-field layui-field-title" style="margin-left: 0px">
        <legend>产品展示&emsp;&emsp;&emsp;&emsp;&emsp;

        </legend>
    </fieldset>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<table class="layui-hide" id="test" style="width: 300px" lay-filter="demo"></table>
</td>
<td style="vertical-align:top">
    <button  type="button" class="layui-btn" lay-submit="" lay-filter="demo1">添加产品</button>

</td>
</tr>
</table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="up">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" id="del">删除</a>
</script>

<script>
    function upproduct(product) {

        window.location.href="productAdd.html?pid="+product.pid+"";


    }
</script>
<script th:inline="none">

        layui.use('table', function(){
            var form = layui.form
            var $=layui.jquery;
            var table = layui.table;
            //监听工具条
            table.on('tool(demo)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){

                    upproduct(data);
                }
            });
            $('#submit').on('click', function () {
                // 搜索条件

                var pname = $('#pname').val();
                var ptid = $('#proty').val();
                var sid=$('#suppli').val();
                table.reload('peoducttable', {

                    method: 'post'

                    , where: {
                       'pname': pname,
                        'ptid':ptid,
                        'sid':sid
                    }

                });
            });

            table.render({
                id:'peoducttable'
               ,elem: '#test'
                ,url:'/product/show'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,parseData:function(res){
                    console.log(res)
                    return{
                        "code":0
                        ,"msg":""
                        ,"count":1000
                        ,"data":res
                    }
                }
                ,cols: [[

                    ,{field:'pname', width:150, title: '产品名称'}
                    ,{field:'unit', width:150, title: '单位'}
                    ,{field:'ptname', width:150, title: '产品类型',templet:'<div>{{d.protype.ptname}}</div>'}
                    ,{field:'sname', width:150, title: '供应商',templet:'<div>{{d.supplier.sname}}</div>'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新
                    ,{fixed: 'right', width:178,title: '操作', toolbar: '#barDemo'}
                ]]

            });

            $.ajax( {
                url : "/protype/show",
                //data : params,
                dataType : "json",
                cache : false,
                async: false,
                error : function(textStatus, errorThrown) {
                    hiAlert("系统ajax交互错误: " + textStatus);
                },
                success :
                //回调函数 根据返回值 赋予下拉框值
                    function(eve) {

                        var htm = '<option value="">请选择...</option>';
                        if(eve != null){
                            for(var i=0;i<eve.length;i++){
                                htm +='<option value="'+eve[i].ptid+'">'+eve[i].ptname+'</option>'

                            }
                        }
                        $("#proty").html(htm);

                        form.render("select");
                    }

            });
            $.ajax( {
                url : "/supplier/show",
                //data : params,
                dataType : "json",
                cache : false,
                async: false,
                error : function(textStatus, errorThrown) {
                    hiAlert("系统ajax交互错误: " + textStatus);
                },
                success :
                //回调函数 根据返回值 赋予下拉框值
                    function(eve) {

                        var htm = '<option value="">请选择...</option>';
                        if(eve != null){
                            for(var i=0;i<eve.length;i++){
                                htm +='<option value="'+eve[i].sid+'">'+eve[i].sname+'</option>'

                            }
                        }
                        $("#suppli").html(htm);

                        form.render("select");
                    }

            });

        });



</script>

</body>
</html>